<template>
	<div id="one-one">
		<h1>one-one</h1>
		<div>接收到的值：{{newcity}}，接受到的num：{{newnum}}</div>
		<hr />
		<i>外部属性转内部属性再修改值</i>
		<button @click="changeCity('深圳')">深圳</button>
		<button @click="changeNum(5678)">改变数字</button>
	</div>
</template>

<script>
	export default {
		//props外部属性（外部属性不能修改，保证单项数据流）
		//数组方式接收
		//props: ["city","num"],
		//对象方式接收(可以进行属性校验)
		props: {
			city: String,
			num: Number
		},
		//内部属性
		data(){
			//外部属性转内部属性
			let newcity = this.city;
			let newnum = this.num;
			return {
				newcity,
				newnum
			}
		},
		//监听属性变化
		watch: {
			city(){
				this.newcity = this.city;
			}
		},
		methods: {
			changeCity(cityval){
				this.newcity = cityval;
			},
			changeNum(numval){
				this.newnum = numval;
			}
		},
		created(){
			console.log(this.city+this.num)
		}
	}
</script>

<style>
#one-one{
	padding: 20px;
	background: yellow;
	border: 2px solid #000000;
}
</style>